<template>
	<view>
		<view class="content">
			<view class="day-item" @click="naviTo(d.date)" v-for="(d, i) in dayList" :key="d.id">
				<view class="item-list">
					<image class="item-image" :src="d.cover" mode="widthFix"></image>
				</view>
				<view class="item-date">
					<text>{{d.date}}</text>
				</view>
			</view>
		</view>
		<u-gap height="100" bgColor="#fff"></u-gap>
	</view>
</template>

<script>
	import {
		http
	} from '../untils/http.js'
	
	const date = new Date()
	const IsYear = date.getFullYear()
	const IsMonth = date.getMonth() + 1

	export default {
		name: "DayList",
		data() {
			return {
				dayList: []
			};
		},
		created() {
			this.getDayList()
		},
		methods: {
			getDayList() {
				let url = 'feeds/list/'

				// let date = new Date()
				// console.log(date);
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				// month = (month > 9) ? month : ('0' + month)
				// let tomonth = year + '-' + month

				// http(url + tomonth).then(res => {
				// 	this.dayList = res.data
				// 	console.log(this.dayList);
				// })

				for (year = date.getFullYear(); year >= IsYear; year--) {
					for (month = IsMonth; month > 0; month--) {
						month = (month > 9) ? month : ('0' + month)
						http(url + year + '-' + month).then(res => {
							this.dayList = [...this.dayList, ...res.data]
							// console.log(this.dayList);
						})
						// if (month === 0) {
						// 	month = 12
						// }
					}
				}
			},
			naviTo(date) {
				uni.navigateTo({
					url: '/pages/DailyContent/DailyContent?date=' + date
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		box-sizing: border-box;
		width: 750rpx;
		padding: 0 18rpx;
		column-count: 2;
		column-gap: 20rpx;

		.day-item {
			// 告诉父元素在分页时不要再内部中断
			break-inside: avoid;
			
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			margin-bottom: 10px;
			width: 345rpx;
			height: 150px;
			overflow: hidden;
			// border: 1px solid rgb(188, 188, 188);
			border-radius: 5px;
			background-color: #f5f5f5;
			box-shadow: 2px 2px 10px 1px #e2e2e2; 
		}

		.item-list {
			box-sizing: border-box;
			overflow: hidden;
			width: 345rpx;
			height: 110px;
			
			.item-image {
				display: block;
				margin-bottom: 5px;
				width: 100%;
				// height: 100%;
			}
		}
		
		.item-date {
			width: 100%;
			height: 40px;
			font-size: 14px;
			line-height: 40px;
			text-align: center;
			color: gray;
		}
		
	}
</style>